<style lang="less">
  .order-browse {
    .el-table .info-row {
      background: #FFAEB9;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }

    .bg-purple-dark {
      background: #d3dce6;
    }

    .bg-purple {
      background: #d3dce6;
    }

    .bg-purple-light {
      background: #e5e9f2;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }

    .bg-blue {
      background-color: #00c0ef;
    }

    .bg-cyan {
      background-color: #00a65a;
    }

    .bg-orange {
      background-color: #f39c12;
    }

    .bg-reg {
      background-color: #f56954;
    }

    .bookmark {
      height: 134px;
    }

    .sp-title-msg {
      color: #ffffff;
      margin-left: 48px;
    }

    .f-font-22 {
      font-size: 22px;
    }

    .f-font-20 {
      font-size: 20px;
    }

    .sp-title-font-12 {
      font-size: 12px;
    }

    .f-pa-mt22 {
      position: absolute;
      margin-top: 22px;
    }

    .text {
      font-size: 14px;
    }

    .item {
      padding: 18px 0;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }

    .box-card {
      width: 100%;
    }

    .fa-fn-icon {
      font-size: 90px;
      color: rgba(0, 0, 0, 0.15);
    }

    .f-fr {
      float: right
    }

    .f-lh134 {
      line-height: 134px;
    }

    .f-mr20 {
      margin-right: 20px;
    }

    .f-mt6 {
      margin-top: 6px;
    }

    .f-mt10 {
      margin-top: 10px;
    }

    .f-mb5 {
      margin-bottom: 5px;
    }

    .f-mb6 {
      margin-bottom: 6px;
    }

    .f-ww {
      width: 100%;
    }

    .f-w20 {
      width: 20px;
    }

    .f-h20 {
      height: 20px;
    }

    li {
      list-style-type: none;
    }

    .el-wmt {
      width: 50px;
      margin-top: -10px
    }

    label {
    //  margin-left: 10px;
    }

    .f-pa {
      position: absolute;
    }

    .f-fr {
      float: right;
    }

    .f-pl {
      padding-left: 10px;
    }

    .div-w100 {
      width: 100px;
    }

    .f-tc {
      text-align: center;
    }

    .f-c-red {
      color: red;
    }

    .f-mb3 {
      margin-bottom: 3px;
    }

    .f-mt3 {
      margin-top: 3px;
    }

    .el-table-column {
      height: 100px;
    }

    tr {
      height: 110px;
    }
  }
</style>

<template>
  <div class="order-browse">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-blue bookmark">
          <div class="f-pa-mt22">
            <span class="sp-title-msg f-font-22 f-mb6">当日订单</span>
            <p class="sp-title-msg sp-title-font-12 f-mb3">
              新增<label>{{datas.toDayAdd}} 单</label>
            </p>
            <p class="sp-title-msg sp-title-font-12 f-mt3">确认<label>{{datas.toDayConfirm}} 单</label>
            </p>
          </div>
          <i class="fa fa-files-o fa-fn-icon f-fr f-lh134 f-mr20" aria-hidden="true"></i>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-cyan bookmark">
          <div class="f-pa-mt22">
            <span class="sp-title-msg f-font-22 f-mb6">一周订单</span>
            <p class="sp-title-msg sp-title-font-12 f-mb3">完成<label>{{datas.weekOrderFinish}} 单</label></p>
            <p class="sp-title-msg sp-title-font-12 f-mt3">及时<label>{{datas.weekOrderThis}} 单</label>
            </p>
          </div>
          <i class=" fa fa-bar-chart fa-fn-icon f-fr f-lh134 f-mr20" aria-hidden="true"></i>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-orange bookmark">
          <div class="f-pa-mt22">
            <span class="sp-title-msg f-font-22 f-mb6">支付情况</span>
            <p class="sp-title-msg sp-title-font-12 f-mb3">待支付<label>{{datas.waitPayStatus}} 单</label></p>
            <p class="sp-title-msg sp-title-font-12 f-mt3">总金额<label>{{datas.aggregateAmount}} 元</label></p>
          </div>
          <i class="fa fa-usd fa-fn-icon f-fr f-lh134 f-mr20" aria-hidden="true"></i>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-reg bookmark">
          <div class="f-pa-mt22">
            <span class="sp-title-msg f-font-22 f-mb6">签收情况</span>
            <p class="sp-title-msg sp-title-font-12 f-mb3">待签收<label>{{datas.waitSignIn}} 单</label></p>
            <p class="sp-title-msg sp-title-font-12 f-mt3">待回单<label>{{datas.waitReceipt}} 单</label></p>
          </div>
          <i class="fa fa-yelp fa-fn-icon f-fr f-lh134 f-mr20" aria-hidden="true"></i>
        </div>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div slot="header" class="clearfix" style="height: 15px">
        <span style="line-height: 15px;">订单管理</span>
        <el-input class="f-fr el-wmt" v-model="input" @change="setRefresh()"></el-input>
        <el-button style="float: right;margin-top: -10px;margin-right: 15px" v-on:click="getOrderView"
                   type="primary">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </el-button>
      </div>
      <el-table :data="tableData" class="f-ww" :show-header="false" :row-class-name="tableRowClassName">
        <el-table-column prop="orderAddress" width="300">
          <template slot-scope="scope">
            <li class="f-font-20 f-mb5">
              <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
                 @click="orderSelectDialog(scope.row)">
                {{scope.row.orderNumber}}
              </a>
            </li>
            <li>
              {{scope.row.shipmentsProvince}}{{scope.row.shipmentsCity}}{{scope.row.shipmentsCounty}}{{scope.row.shipmentsTown}}<img
              src="../../assets/start-address.gif" class="f-w20 f-h20 f-pa"></li>
            <li>
              {{scope.row.sendProvince}}{{scope.row.sendCity}}{{scope.row.sendCounty}}{{scope.row.sendTown}}<img
              src="../../assets/end-address.gif" class="f-w20 f-h20 f-pa"></li>
          </template>
        </el-table-column>
        <el-table-column prop="orderName">
          <template slot-scope="scope">
            <li>提交时间&nbsp;&nbsp;{{scope.row.createDate}}</li>
            <li>
              发运日期&nbsp;&nbsp;{{scope.row.shipmentsDate}}
            </li>
            <li v-if="scope.row.extractType===105002001">
              计划提货&nbsp;&nbsp;{{scope.row.extractDate}} {{scope.row.extractTime}}
            </li>
            <li v-if="scope.row.extractType===105002002">
              {{scope.row.extractTypeName}}&nbsp;&nbsp;{{scope.row.startNetWorkName}}
            </li>
            <li v-if="scope.row.sendType===105001001">计划送抵&nbsp;&nbsp;{{scope.row.sendTime}}</li>
            <li v-if="scope.row.sendType===105001002">
              {{scope.row.sendTypeName}}&nbsp;&nbsp;{{scope.row.endNetWorkName}}
            </li>
          </template>
        </el-table-column>
        <el-table-column prop="orderPrice">
          <template slot-scope="scope">
            <div class="div-w100">
              <li class="f-fr" v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].amount}}&nbsp;&nbsp;件
                <img src="../../assets/icon-piece.gif" class="f-w20 f-h20 f-pa f-pl">
              </li>
              <br>
              <li class="f-fr" v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].weight}}&nbsp;&nbsp;吨
                <img src="../../assets/icon-again.gif" class="f-w20 f-h20 f-pa f-pl">
              </li>
              <br>
              <li class="f-fr" v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].volume}}&nbsp;&nbsp;方
                <img src="../../assets/icon-volume.png" class="f-w20 f-h20 f-pa f-pl">
              </li>
              <br>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderPrice">
          <template slot-scope="scope">
            <div class="div-w100 f-tc">
              <li class="f-font-22">总费用</li>
              <li class="f-c-red f-mt10">{{scope.row.orderPrice}}元</li>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderPrice">
          <template slot-scope="scope">
            <li v-if="scope.row.mMebPersonal !=null">{{scope.row.mMebPersonal.realName}}</li>
            <li v-if="scope.row.mMebPersonal !=null">{{scope.row.mMebPersonal.phone}}</li>
            <li>{{scope.row.shipmentsStreet}}</li>
          </template>
        </el-table-column>
        <el-table-column prop="agingName">
        </el-table-column>
      </el-table>
    </el-card>

    <!--订单查看Dialog-->
    <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
      <order-select :title="orderSelectForm"></order-select>
    </el-dialog>
  </div>

</template>
<script>
import { getOrderTableData, getOrderBrowses } from '../../api/order/order.js';
import { isEmpty } from '../../lib/util.js';
import OrderSelect from './OrderSelectDialog.vue';

export default {
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      orderSelect: false,
      tableData: [],
      orderSelectForm: {},
      input: sessionStorage.getItem('input'),
      datas: {
        toDayAdd: '',
        toDayConfirm: '',
        weekOrderFinish: '',
        weekOrderThis: '',
        waitPayStatus: '',
        aggregateAmount: '',
        waitSignIn: '',
        waitReceipt: ''
      }
    };
  },
  methods: {
    tableRowClassName (row, index) {
      return row.agingDictEntityId === 112006003 ? 'info-row' : '';
    },
    orderSelectDialog (val) {
      this.orderSelect = true;
      this.orderSelectForm = val;
    },

    getOrderView () {
      let token = this.$store.state.token;
      getOrderTableData({
        page: '1',
        size: '8',
        filters: '',
        sorts: '-createDate'
      }).then((res) => {
        this.tableData = res.data.detailModelList;
      });

      getOrderBrowses({
        token: token,
        createDate: new Date().Format('yyyy-MM-dd'),
        payStatus: '101003001'
        //  orderStatus: '123'
      }).then((res) => {
        if (res.data.successFlg) {
          this.datas = res.data.obj;
          for (let dt in this.datas) {
            if (isEmpty(this.datas[dt])) {
              this.datas[dt] = 0;
            }
          }
        }
      });
    },
    setRefresh () {
      this.input = sessionStorage.setItem('input', this.input);
    }
  },
  mounted () {
    this.getOrderView();
    sessionStorage.getItem('input') == null ? sessionStorage.setItem('input', 10) : sessionStorage.getItem('input');
    let inv = sessionStorage.getItem('input') + '000';
    let orderTiming = setInterval(() => {
      this.getOrderView();
    }, inv);
    sessionStorage.setItem('orderTiming', orderTiming);
  }
};
</script>
